<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--
    通过a标签表示一个超链接,可以实现页面的跳转
    href:指定链接跳转的地址,其值是一个url地址,可以使用相对地址与绝对地址
        一个完整的url格式为 协议名://域名:端口号/应用名/访问资源的命令[参数]
        例如: http://127.0.0.1:8080/ums/login?username=admin&password=123456
    标签体:在页面中显示的链接内容
-->
<!--
    访问服务内的资源
    一般使用相对地址
    完整写法:http://127.0.0.1:8080/html_css_js/html/12-无序列表.html
    如果访问的资源是服务内资源,则直接使用相对路径即可
 -->
<a href="12-无序列表.html">无序列表</a><br>
<!--
    跨域访问
    当协议名、域名、端口三者有任意一个不一致,则表示跨域了
 -->
<a href="https://www.baidu.com/">百度一下</a><br>
<a href="#d1">最喜欢的电视剧</a>
<a href="#d2">学习用品</a><br>
<a id="a1" href="#a2">回到底部</a><br>
<!--
    如果href没有值,点击超链接之后相当于跳转到当前页面
    在使用JavaScript的某些时候,可能不希望页面跳转,可以直接写#号
    直接写#号相当于回到页面的顶部
    或者href的值改为javascript:;
-->
<a href="#">测试</a>
<a href="javascript:;">测试2</a>
<a href="mailto:">发送邮件</a>
<hr>
<h2>家用电器</h2>
<ul type="disc">
    <li>电视机</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h2>电子产品</h2>
<ul type="circle">
    <li>手机</li>
    <li>平板</li>
    <li>电子表</li>
</ul>
<h2>水果</h2>
<ul type="square">
    <li>香蕉</li>
    <li>苹果</li>
    <li>西瓜</li>
    <li>车厘子</li>
</ul>
<h2>学习用品</h2>
<ul type="none">
    <li>铅笔</li>
    <li>橡皮</li>
    <li>文具盒</li>
    <li>笔记本</li>
</ul>
<ol type="1" start="3" reversed="reversed">
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
    <li>第五章</li>
    <li>第六章</li>
</ol>
<ol type="A" start="2" reversed>
    <li>第一个选项</li>
    <li>第二个选项</li>
    <li>第三个选项</li>
    <li>第四个选项</li>
</ol>
<ol type="a" start="5">
    <li>第一个选项</li>
    <li>第二个选项</li>
    <li>第三个选项</li>
    <li>第四个选项</li>
</ol>
<ol type="I" start="2" reversed>
    <li>第一个选项</li>
    <li>第二个选项</li>
    <li>第三个选项</li>
    <li>第四个选项</li>
</ol>
<ol type="i" start="5">
    <li>第一个选项</li>
    <li>第二个选项</li>
    <li>第三个选项</li>
    <li>第四个选项</li>
</ol>
<dl>
    <dt id="d1">您最喜欢的电视剧</dt>
    <dd>庆余年</dd>
    <dd>难哄</dd>
    <dd>去有风的地方</dd>

    <dt>您最喜欢的电影</dt>
    <dd>哪吒之魔童闹海</dd>
    <dd>哪吒之魔童降世</dd>
    <dd>唐探1990</dd>
    <dd>长津湖</dd>
    <dd>战狼2</dd>
</dl>

<dl>
    <dt>您最喜欢的综艺节目</dt>
    <dd>奔跑吧</dd>
    <dd>极限挑战</dd>
    <dd>向往的生活</dd>
    <dd>最强大脑</dd>
</dl>

<ul type="disc">
    <li>电视机</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h2>电子产品</h2>
<ul type="circle">
    <li>手机</li>
    <li>平板</li>
    <li>电子表</li>
</ul>
<h2>水果</h2>
<ul type="square">
    <li>香蕉</li>
    <li>苹果</li>
    <li>西瓜</li>
    <li>车厘子</li>
</ul>
<h2 id="d2">学习用品</h2>
<ul type="none">
    <li>铅笔</li>
    <li>橡皮</li>
    <li>文具盒</li>
    <li>笔记本</li>
</ul>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="a2" href="#a1">回到顶部</a>
<a name="a2" href="#">回到顶部2</a>
<a name="a2" href="javascript:;">回到顶部3</a>
</body>
</html>